<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
	<script type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" href="build/css/intersect.css">
    <style>
        /* -- Reset -- */
        body{
            margin: 0;
            padding: 0;
        }
        /* -- Reset End -- */
    </style>
</head>
<body>
<div id="header" class="header">
    <div id="btn_menu" class="btn_menu">
        <div class="line_up" ></div>
        <div class="line_down" ></div>
    </div>
</div>
<script>
    $.fn.extend({ // 注册jquery组件
        intersect_btn:function(params) {
            var defaults = {
                intersect:function(){ //点击进行相交时候事件

                },
                flat:function(){ // 点击进行恢复时候事件

                }
            };

            for (var def in defaults) {
                if (typeof params[def] === 'undefined' || params[def] === null) {
                    params[def] = defaults[def];
                }
            }

            var menu_show = false; // 点击状态切换 false为未点击 true为点击
            var line_up = $(this).children(":first");
            var line_down = $(this).children(":last");
            $(this).on('click',function(){
                if(!menu_show){
                    //点击进行相交时执行
                    params.intersect();
                    line_up.addClass('start');
                    line_down.addClass('start');
                    setTimeout(function(){ // 计时 到了以后移除动画 添加倾斜状态
                        line_up.addClass('afterstart');
                        line_up.removeClass('start');

                        line_down.addClass('afterstart');
                        line_down.removeClass('start');
                    },300);
                    menu_show = true;
                }else{
                    //点击进行恢复时执行
                    params.flat();
                    line_up.addClass('flat');
                    line_down.addClass('flat');
                    setTimeout(function(){ // 计时 到了以后移除所有动画 所有状态样式 恢复最初
                        line_up.removeClass('afterstart');
                        line_up.removeClass('flat');
                        line_down.removeClass('afterstart');
                        line_down.removeClass('flat');
                    },300);
                    menu_show = false;
                }
            });
        }
    });


    $("#btn_menu").intersect_btn({
        intersect: function(){
            console.log("intersect");
        },
        flat: function(){
            console.log("flat");
        }
    });


</script>
</body>
</html>